<template>
  <a-list-item
    action-layout="vertical"
    :style="{
      opacity: item.status ? 0.5 : 1,
    }"
    @mouseenter="handleToggle"
    @mouseleave="handleToggle"
  >
    <template #extra>
<!--      <a-button v-if="open && !item.status" type="dashed" size="mini" @click="read(item)">标为已读</a-button>-->
      <a-button v-if="open" type="dashed" size="mini" @click="read(item)">标为已读</a-button>
    </template>
    <div class="item-wrap">
      <a-list-item-meta>
        <template #title>
          <a-space :size="4">
            <span>{{ item.type_name }}</span>
          </a-space>
        </template>
        <template #description>
          <div>
            <a-typography-paragraph
              :ellipsis="{
                rows: 1,
              }"
            >
              {{ item.content }}
            </a-typography-paragraph>
            <a-typography-text class="time-text">
              {{ item.created_at }}
            </a-typography-text>
          </div>
        </template>
      </a-list-item-meta>
    </div>
  </a-list-item>
</template>

<script lang="ts" setup>
  import { useToggle } from '@vueuse/core';

  const props = defineProps({
    item: {
      type: Object,
      required: true,
    },
    showTag: {
      type: Boolean,
      default: true,
    },
  });
  const emit = defineEmits(['itemClick']);

  const [open, toggle] = useToggle(props.showTag);
  const handleToggle = () => {
    toggle();
  };

  // 标记已读
  const read = (item: any) => {
    if (!item.status) {
      emit('itemClick', item);
    }
  };
</script>

<style scoped lang="less">

</style>
